<template>
  <div class="overlay">
    <van-overlay :show="showoff">
      <van-steps :active="active" active-color="orange" inactive-color="#fff">
        <van-step>买家下单</van-step>
        <van-step>商家接单</van-step>
        <van-step>买家提货</van-step>
      </van-steps>
      <div class="wrapper">
        <div class="block">
          <copyDialog v-if="tip" @closeCopy="closeCopy"/>
          <!-- 复制口令 -->
          <button class="buy_btn" @click="tip=true">已选择商品</button>
          <div class="block-t">
            <div class="header">
              <span></span>
              <span>仓库正在发货</span>
              <span @click="closeFn">
                <svg-icon iconClass="close"></svg-icon>
              </span>
            </div>
            <div class="main">
              <div class="item_area" v-if="area">
                <div class="dzicon">
                  <svg-icon iconClass="dizhi"></svg-icon>
                </div>
                <div>
                  <p class="username">
                    <b>{{area.name}}</b>
                    {{area.tel}}
                  </p>
                  <p>{{area.home}}</p>
                </div>
              </div>
              <p v-else>请添加地址</p>
            </div>
            <div class="footer">
              <van-cell is-link @click="showPopup" v-if="this.active != 2">添加收货地址</van-cell>
              <van-cell v-else>请注意查收</van-cell>
              <van-popup v-model="show" class="add">
                <!-- 输入任意文本 -->
                <van-field v-model="name" label="收货人" class="a"/>
                <!-- 输入手机号，调起手机号键盘 -->
                <van-field v-model="tel" type="tel" label="手机号" class="a"/>
                <!-- 允许输入正整数，调起纯数字键盘 -->
                <van-field v-model="digit" label="地址" class="a"/>
                <!-- 允许输入数字，调起带符号的纯数字键盘 -->
                <van-field v-model="number" type="number" label="收货人电话" class="a"/>
                <!-- 输入密码 -->
                <van-field v-model="password" type="password" label="配送费" class="a"/>
                <button @click="toexam()">确认添加地址</button>
              </van-popup>
            </div>
          </div>
          <div class="block-b">
            <div class="head">
              <span></span>
              <span>相关商品推荐</span>
              <span></span>
            </div>
            <div class="shop">
              <dl v-for="(item, index) in list" :key="index" @click="ToDetail(item)">
                <dt>
                  <img src="@/img/1.png" alt="">
                </dt>
                <dd>
                  <p>{{ item.title }}</p>
                  <b>￥{{ item.price }}</b>
                </dd>
              </dl>
            </div>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import copyDialog from './copyDialog.vue'
import { Toast } from 'vant'
export default {
  data() {
    return {
      show: false,
      list: [],
      tel: '',
      name: '',
      digit: '',
      number: '',
      password: '',
      active: 1,
      tip: false, //复制口令
      area: {
        name: '1',
        tel: '2',
        home: '3',
      },
    }
  },
  components: {
    copyDialog,
  },
  props: {
    showoff: Boolean,
  },
  created() {
    this.$api.homeList().then((res) => {
      this.list = res.list
    })
    this.area = JSON.parse(localStorage.getItem('area')) || false
  },
  methods: {
    closeCopy(flt) {
      this.tip = flt
      /* this.closeFn() */
    },
    closeFn() {
      this.$emit('close', !this.showoff)
    },

    toaddress() {},
    showPopup() {
      this.show = true
    },
    toexam() {
      Toast('添加成功,可在我的页面查看')
      const hh = {
        name:this.name,
        tel:this.tel,
        home:this.digit
      }
      this.area=hh;
      window.localStorage.setItem('area', JSON.stringify(hh))
      this.show = false
      /* this.$router.push("/examine"); */
      this.active += 1
    },
    activenext() {},
  },
}
</script>

<style lang="scss" scoped>
@import '@css/style.scss';
.buy_btn {
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 100;
  border: 0;
  border-radius: px2rem(50);
  font-size: px2rem(20);
  color: #fff;
  padding: px2rem(10) px2rem(15);
  background: red;
}
/deep/.van-steps {
  background: rgba(0, 0, 0, 0.1);
  color: #fff;
  position: absolute;
  width: 80%;
  top: 8%;
  left: 50%;
  transform: translate(-50%, 0);
}
/deep/.van-step--finish {
  color: #febf4b;
}
/deep/.van-step__title {
  font-size: px2rem(18);
}
/deep/.van-step__line {
  height: px2rem(3);
}
/deep/.van-step__circle-container {
  background: none;
}
/deep/.van-step__circle {
  width: px2rem(15);
  height: px2rem(15);
}
/deep/.van-icon van-icon-checked {
  font-size: px2rem(23);
  margin: 0 px2rem(-9);
}
.overlay {
  width: 100%;
  height: 100%;
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
  }

  .block {
    width: 100%;
    height: px2rem(480);
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    background: #ccc;

    .block-t {
      background: #fff;
      .header {
        width: 100%;
        height: px2rem(40);
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 px2rem(30);
        font-size: px2rem(16);
      }
      .main {
        width: 100%;
        height: px2rem(115);
        border-bottom: 1px solid #ccc;
        display: flex;
        padding: 0 px2rem(18);
        align-items: center;
        .dzicon {
          font-size: px2rem(16);
          margin-right: px2rem(10);
        }
        .username {
          font-size: px2rem(12);
          b {
            font-size: px2rem(16);
          }
        }
        .userdz {
          font-size: px2rem(16);
        }
      }
      .footer {
        width: 100%;
        height: px2rem(40);
        font-size: px2rem(13);
        text-align: center;
        line-height: px2rem(40);
        color: #ccc;
        button {
          width: 70%;
          height: px2rem(40);
          background: red;
          border: none;
          border-radius: px2rem(20);
          color: #fff;
          margin-top: px2rem(10);
        }
        .add {
          width: 100%;
          height: px2rem(700);
        }
        .a {
          width: 100%;
          height: px2rem(50);
          border-bottom: px2rem(1) solid #ccc;
        }
      }
    }
    .block-b {
      width: 100%;
      height: 100%;
      margin-top: 10px;
      background: #fff;

      position: relative;
      display: flex;
      flex-direction: column;

      .head {
        width: 100%;
        height: px2rem(40);
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: px2rem(16);
      }
      .shop {
        width: 100%;
        height: auto;
        flex: 1;
        overflow-y: auto;
        padding: 0 px2rem(10);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-bottom: px2rem(200);
        dl {
          width: 49%;
          height: auto;
          dt {
            padding: px2rem(5) px2rem(10);
            img {
              border-radius: px2rem(15) px2rem(15) 0 0;
            }
          }
          dd {
            padding: px2rem(5) px2rem(10);
            font-size: px2rem(16);
            b {
              color: red;
            }
          }
        }
      }
    }
  }
}
</style>